import React from 'react'
import { Modal, Descriptions, Typography } from 'antd'

const { Text } = Typography

class BookInfoModalUI extends React.PureComponent {
  constructor (props) {
    super(props)

  }

  render () {
    const { onCancel, onOk, visible, bookInfo } = this.props
    const { book, tagName } = bookInfo
    return (
      <Modal
        title="图书详细信息"
        width="600px"
        open={visible}
        maskClosable={false}
        onCancel={onCancel}
        onOk={onOk}
        footer={[]}
      >
        <Descriptions bordered>
          <Descriptions.Item span={3} label="书名">{book?.name}</Descriptions.Item>
          <Descriptions.Item span={3} label="作者">{book?.author}</Descriptions.Item>
          <Descriptions.Item span={3} label="条码号">{book?.isbn}</Descriptions.Item>
          <Descriptions.Item span={3} label="简介">{book?.introduction}</Descriptions.Item>
          <Descriptions.Item span={3} label="定位">{book?.pressmark}</Descriptions.Item>
          <Descriptions.Item span={3} label="标签">
            <Text strong>{tagName}</Text>
          </Descriptions.Item>
          <Descriptions.Item span={3} label="状态">{book?.state ? '在馆' : '不在馆'}</Descriptions.Item>
        </Descriptions>
      </Modal>
    )
  }
}

export default BookInfoModalUI